<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Troy Inaction</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="http://code.jquery.com/jquery-latest.js"></script>	
<script src="slider.js" type="application/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script src="popup.js" type="text/javascript"></script>

<script language="Javascript"> 

<!--Initiate Variables-->
var ind = 0;
var indTime = 0;
var mydates = new Array();
var d = new Date();

//Makes an array of the next 30 days.  This can be then used with dynamic html to fill the day list.
for(i=0; i < 30; i++){
	mydates.push(d.toDateString());
	d.setDate(d.getDate()+1);
}

//Add another Event to the RPI Slider Box with a link to the Select Event
function addElementRPI() {
  var ni = document.getElementById('RPI-box');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newa = document.createElement('a');
  newa.setAttribute('href','javascript:setVisibleRPI("description",true)');
  ni.appendChild(newa);
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.setAttribute('class','RPI-event');
  newdiv.innerHTML = '<h2>' + events.bwEventList.events[ind].summary + '</h2><p>Date: ' + events.bwEventList.events[ind].start.longdate + '<br />Time: ' + events.bwEventList.events[ind].start.time + '<br />Location: ' + events.bwEventList.events[ind].location.address + '</p>';
  newa.appendChild(newdiv);
  ind++;
}

//Add another Date to the Date Slider Box
function addElementDate() {
  var ni = document.getElementById('Date-box');
  var newdiv = document.createElement('div');
  newdiv.setAttribute('class','dates');
  newdiv.innerHTML = '<h3>' + mydates[indTime] + '</h3>';
  ni.appendChild(newdiv);
  indTime++;
}
function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

</script>
</head>

<body>
<!--In each scrollbar, there is a frame for the scrollbar ("bar"), the scrolling area ("scroller"), and the scrollable bar ("box").  Each box holds a list of event objects that are created dynamically in order to display the current event information that can be selected to view their corresponding descriptions.-->

<!--The Dates scrollbar-->
<div id="Dates" class="bar">
  <div id="Date-scroller" class="scroller">
    <div id="Date-box" class="box">
      <script language="Javascript">
			var i = 0;
			//Fill the Date Slider Box
			for (i=0;i<=10;i=i+1) {
				addElementDate();
			}
		</script>
    </div>
  </div>
  <div id="Date-previous" class="prev"></div>
  <div id="Date-next" class="next"></div>
</div>

<br />

<!--The scrollbar for RPI events-->
<div id="RPI" class="bar">
  <div id="RPI-scroller" class="scroller">
    <div id="RPI-box" class="box">
		<input type="hidden" value="0" id="theValue" />
		<script language="Javascript">
			var i = 0;
			//Fill the RPI Slider Box
			for (i=0;i<=4;i=i+1) {
				addElementRPI();
			}
		</script>
    </div>
  </div>
  <div id="RPI-previous" class="prev"></div>
  <div id="RPI-next" class="next"></div>
</div>

<br />

<!--The scrollbar for Troy events-->
<div id="Troy" class="bar">
  <div id="Troy-scroller" class="scroller">
    <div id="Troy-box" class="box">
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Previous Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Current Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>
      <a href="javascript:setVisibleRPI('description',true)"><div class="Troy-event">
		<h2>Next Event</h2>
		<p>Date<br /> Time <br />Location</p>
      </div></a>    </div>
  </div>
  <div id="Troy-previous" class="prev"></div>
  <div id="Troy-next" class="next"></div>
</div>

<!--The description popup for each event. This box pops up and dynamically fills with the corresponding description when the event is selected.-->
<div id="description"><span id="close">
	<a href="javascript:setVisibleRPI('description')"><img src="images/close.gif" alt="Close" border="0" /></a></span>
</div>

<script language="Javascript">
	//Initialize the Close Feature for Select Event
	setHead('description');
</script>

</body>
</html>
